<template>
    <ul>
        <li class="el-menu-item is-active" style="" @click="teachersClicked">{{manage_teachers}}</li>
        <li class="el-menu-item is-active" style="" @click="studentsClicked">{{manage_students}}</li>
        <li class="el-menu-item is-active" style="" @click="usersClicked">{{manage_users}}</li>
    </ul>
</template>

<script>

    export default {
        name: 'db-sidebar',
        data() {
            return {
                manage_users: '用户管理',
                manage_students: '学生管理',
                manage_teachers: '教师管理'
            }
        },
        methods: {
            teachersClicked () {
                this.$emit("menu_selected", 'manage_teachers')
            },
            studentsClicked () {
                this.$emit("menu_selected", 'manage_students')
            },
            usersClicked () {
                this.$emit("menu_selected", 'manage_users')
            }
        }
    }

</script>

<style>
    li {
        padding-left: 20px;
    }
</style>
